<template>
  <div class="json-editor">
      


    <textarea ref="textarea" v-model="txt"/>
    <div>
      {{txt}}
    </div>
    </div>
</template>
<script>
import CodeMirror from "codemirror";
import "codemirror/addon/lint/lint.css";
import "codemirror/lib/codemirror.css";
require("script-loader!jsonlint");
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";
export default {
  data () {
    return {
      txt:""
    }
  },
  methods: {
    editor(){
     this.jsonEditor.on("change", cm => {
      this.txt = this.jsonEditor.getValue()
    });
    }
  },
  mounted() {
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      lineNumbers: true,
      mode: "text/javascript",
      theme: "rubyblue",
      // theme: "default",
      lint: true
    });
    this.editor()

  }
};
</script>
<style>
</style>
